import React, { Component } from 'react'

export default class App extends Component {
  constructor() {
    super()

    this.state = {
      userName: ''
    }
  }

  render() {
    return (
      <div>
        <form onSubmit={e => this.handleSubmit(e)}>
          <label htmlFor="username">
            用户名：
            {/* 
              单向数据流(监听改变 -> setState -> 设置到value)
              通过onChange和value控制input内容改变
              这个input就是 受控组件 
            */}
            <input 
              id="username" 
              type="text"
              onChange={e => this.handleInputChange(e)}
              value={this.state.userName}
            />
          </label>

          <input type="submit" value="提交" />
        </form>
      </div>
    )
  }

  handleSubmit(event) {
    //阻止默认行为
    event.preventDefault()

    console.log(this.state);
  }

  handleInputChange(event) {
    this.setState({
      userName: event.target.value
    })
  }
}
